<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022-05-19 09:18:31
 */
import $router from '~/router'
import {
  useSaveTokenType,
  useSessionToken,
  useStore,
  useAccount,
  useToken,
} from '~/store'
import {reGetAdmin} from "~/tool/info"
import {$image, loginAction, $response} from '~/api'
import {onBeforeRouteUpdate} from "vue-router";
import {isDark, toggleDark, isFull, toggleFull} from '~/composables'

const $store = useStore()
const $save_token_type = useSaveTokenType()
const $session_token = useSessionToken()
const $token = useToken()
const account = ref('')
const password = ref('')
const local_token = ref(false)
const localTokenClick = (e) => {
  local_token.value = e
}

const default_page_options = {
  f: '/'
}
const page_options = ref(default_page_options)
onBeforeRouteUpdate((to) => {
  routerChange(to.query)
})

const routerChange = (query) => {
  page_options.value = {
    f: query.f || default_page_options.f
  }
}

onMounted(() => {
  routerChange($router.currentRoute.value.query)
})
const $account = useAccount()
const loginClick = async () => {
  const account_ = account.value.replace(/^\s+|\s+$/g, "")
  if (account_ === '') return window.$message().error('请输入账号')
  if (password.value === '') return window.$message().error('请输入密码')
  const response = await loginAction({
    'account': account_,
    'password': password.value,
  })
  $response(response, () => {
    if (local_token.value) {
      $save_token_type.value = 'local'
      $session_token.value = ''
      $token.value = response.data.token
    } else {
      $save_token_type.value = 'session'
      $session_token.value = response.data.token
      $token.value = ''
    }
    $account.value = {
      account: account_
    }
    reGetAdmin()
    $router.push(decodeURIComponent(page_options.value.f))
  })
}

const accountEnter = () => {
  if (password.value === '') {
    password_input.value.focus()
  } else {
    loginClick()
  }
}

const password_input = ref(null)
const passwordInputRef = (e) => {
  password_input.value = e
}
</script>
<template>
  <n-space justify="center" align="center" :size="100" class="login_wrapper">
    <div class="login_image_wrapper">
      <img :src="$image($store.config.login_image)" alt="">
    </div>
    <div class="login_container_wrapper shadow" p="x-5 y-2">
      <div mt-5>
        <n-h1>登录</n-h1>
      </div>
      <div mt-5>
        <n-input v-model:value="account" @keydown.enter="accountEnter()"
                 placeholder="请输入账号"></n-input>
      </div>
      <div mt-5>
        <n-input :ref="passwordInputRef" type="password" @keydown.enter="loginClick()" v-model:value="password"
                 placeholder="请输入密码"></n-input>
      </div>
      <div mt-10>
        <n-button @click="loginClick()" type="primary" w-full>登录</n-button>
      </div>
      <div mt-5 mb-7>
        <n-checkbox @update:checked="localTokenClick" :default-checked="local_token">自动登录</n-checkbox>
      </div>
      <n-divider dashed></n-divider>
      <n-space justify="center">
        <n-button text @click="toggleFull()" mr-5>
          <div class="login_button_icon_wrapper" v-if="isFull" i-ic-baseline-fullscreen-exit></div>
          <div class="login_button_icon_wrapper" v-else i-ic-baseline-fullscreen></div>
        </n-button>
        <n-button text @click="toggleDark()" mr-5>
          <div class="login_button_icon_wrapper" v-if="isDark" i-ic-baseline-dark-mode></div>
          <div class="login_button_icon_wrapper" v-else i-ic-baseline-light-mode></div>
        </n-button>
      </n-space>
    </div>
  </n-space>
</template>
<style scoped>
.login_button_icon_wrapper {
  font-size: 20px;
}

.login_image_wrapper {
  width: 414px;
  height: 736px;
}

.login_image_wrapper img {
  width: 414px;
  height: 736px;
}

.login_container_wrapper {
  width: 400px;
}
</style>
<route>
{"meta":{"layout":"login","title":"登录"}}
</route>
